<template>
  <div class="userinfo">
    <el-dropdown v-if="user.isLogin">
      <el-avatar :size="80" :src="user.avatar" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="logout">注销</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <span v-else class="nav" @click="changeDialog(true)">
      <el-icon><User /></el-icon>
      登录
    </span>
  </div>
  <div class="phone-nav-list">
    <router-link
      class="ph-nav"
      to="/index"
      @click="closeSidebarAndNavigate('/index')"
    >
      <i class="iconfont icon-shouye1"></i> 首页
    </router-link>
    <router-link
      class="ph-nav"
      to="/sort"
      @click="closeSidebarAndNavigate('/sort')"
    >
      <i class="iconfont icon-guidang"></i> 归档
    </router-link>
    <router-link
      class="ph-nav"
      to="/photo"
      @click="closeSidebarAndNavigate('/photo')"
    >
      <i class="iconfont icon-xiangce"></i> 相册
    </router-link>
    <router-link
      class="ph-nav"
      to="/treeHole"
      @click="closeSidebarAndNavigate('/treeHole')"
    >
      <i class="iconfont icon-41shuoshuo"></i> 树洞
    </router-link>
    <router-link
      class="ph-nav"
      to="/message"
      @click="closeSidebarAndNavigate('/message')"
    >
      <i class="iconfont icon-liuyanban-05"></i> 留言板
    </router-link>
    <router-link
      class="ph-nav"
      to="/tools"
      @click="closeSidebarAndNavigate('/tools')"
    >
      <i class="iconfont icon-wxbgongju"></i> 工具箱
    </router-link>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const props = defineProps({
  openPhoneNav: {
    type: Function,
    default: () => {},
  },
  changeDialog: {
    type: Function,
    default: () => {},
  },
  user: {
    type: Object,
    default: {},
  },
});
const { proxy } = getCurrentInstance();
// 移动端点击导航关闭
const closeSidebarAndNavigate = (path) => {
  props.openPhoneNav();
  setTimeout(() => {
    proxy.router.push(path);
  }, 300);
};
</script>

<style lang="scss" scoped>
//移动端导航栏

.userinfo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-nav-list {
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .ph-nav {
    color: #fff;
    font-size: 18px;
    font-weight: 600;

    .iconfont {
      font-size: 20px;
      margin: 0 5px;
      font-weight: bold;
    }
  }
}
</style>
